<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>折线图</title>
  <link rel="stylesheet " type="text/css " href="css/globle.css " />
  <link rel="stylesheet " type="text/css " href="css/style.css " />
  <script src='js/jquery-2.0.3.js'></script>
  <style type="text/css">
  #main {
    width: 800px;
    height: 300px;
    margin: 50px auto;
  }
  </style>
  <!-- Echarts js -->
  <script src="source/echarts-all.js"></script>
</head>

<body>
  <!--生成的内容-->
  <div id="main"></div>
</body>

</html>
<script type="text/javascript">
$(function() {
  // 图表实例化------------------
  // srcipt标签式引入
  var myChart = echarts.init(document.getElementById('main'));

  // 过渡---------------------
  myChart.showLoading({
    text: '正在努力的读取数据中...', //loading话术
  });

  // ajax getting data...............

  // ajax callback
  myChart.hideLoading();


  // 配置图表显示
  var option = {    
    legend: {
      // 图例内边距，单位px，默认上下左右内边距为5
      padding: 5,
      // Legend各个item之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔
      itemGap: 20,     
      data: ['最高气温', '最低气温']
    },
    title: {
      text: '未来一周气温变化',
      subtext: '纯属虚构'
    },
    // 气泡提示配置
    tooltip: {
      // 触发类型，默认数据触发，可选为：'axis'
      trigger: 'axis'
    },
    // 工具箱
    toolbox: {
      show: true,
      feature: {
        mark: {
          show: true
        },
        dataView: {
          show: true,
          readOnly: false
        },
        magicType: {
          show: true,
          type: ['line', 'bar']
        },
        restore: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    calculable: true,
    xAxis: [{
      // 直角坐标系中横轴数组
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    // 直角坐标系中纵轴数组
    yAxis: [{
      type: 'value',    // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
      axisLabel: {      // 坐标轴两端空白策略，数组内数值代表百分比
        formatter: '{value} °C'
      }
    }],
    series: [{
      // 系列名称
      name: '最高气温',
      // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
      type: 'line',
      data: [11, 11, 15, 13, 12, 13, 10],
      markPoint: {
        data: [{
          type: 'max',
          name: '最大值'
        }, {
          type: 'min',
          name: '最小值'
        }]
      },
      markLine: {
        data: [{
          type: 'average',
          name: '平均值'
        }]
      }
    }, {
      name: '最低气温',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      markPoint: {
        data: [{
          name: '周最低',
          value: -2,
          xAxis: 1,
          yAxis: -1.5
        }]
      },
      markLine: {
        data: [{
          type: 'average',
          name: '平均值'
        }]
      }
    }]
  };

  // 为echarts对象加载数据
  myChart.setOption(option);


})
</script>
